I am at a loss trying to change the color of a png image. Nothing I have tried seems to be working. Here is my code so far (the image (note.png is just a black music eight on a transparent background which you can easily recreate). I want the black color of the note to change, not the background.

var img;

function setup() {
  createCanvas(100, 100);
  pixelDensity(1);
  img = loadImage("../data/note.png");
}

function draw() {
  background(255, 0, 0, 50);      // pinkish
  image(img, 25, 0, 50, 90);

  img.loadPixels();

  for (var x = 0; x < img.width; x++) {
      for (var y = 0; y < img.height; y++) {
             var index = (x + y * width)*4;
         var pixC = img.get(index);
    //     console.log(pixC);
         if (pixC !=  color('255, 0, 0, 50'))    // background color   // I also tried "if (pixC ==  color('0, 0, 0'))" 
             {  
            console.log("OK");      
            pixels[index+0] = 0;
            pixels[index+1] = 255;
            pixels[index+2] = 0;
            pixels[index+3] = 255;           
         }
      }
  }

  img.updatePixels();
  image(img, 25, 0, 50, 90);
}

Thanks for your help.

import processing.sound.*;

// Declare the processing sound variables 
SoundFile sample;
Amplitude rms;

// Declare a scaling factor
float scale=1;

// Declare a smooth factor
float smooth_factor=0.25;

// Used for smoothing
float sum;

PImage img;       // The source image
int cellsize = 2; // Dimensions of each cell in the grid
int columns, rows;   // Number of columns and rows in our system

public void setup() {
  size(800, 1000, P3D); 
  //fullScreen(P3D);
  img = loadImage("...");  // Load the image
  columns = img.width / cellsize;  // Calculate # of columns
  rows = img.height / cellsize;  // Calculate # of rows

    //Load and play a soundfile and loop it
    sample = new SoundFile(this, "...");
    sample.loop();

    // Create and patch the rms tracker
    rms = new Amplitude(this);
    rms.input(sample);

}

void draw() {
  background(255,0,255);
  // Begin loop for columns
  for ( int i = 0; i < columns; i++) {
    // Begin loop for rows
    for ( int j = 0; j < rows; j++) {
      int x = i*cellsize + cellsize/2;  // x position
      int y = j*cellsize + cellsize/2;  // y position
      int loc = x + y*img.width;  // Pixel array location
      color c = img.pixels[loc];  // Grab the color
      // Calculate a z position as a function of mouseX and pixel brightness
      //float z = width/2 * brightness(img.pixels[loc]) - 20.0;
        float rms_scaled=sum*width/10 * brightness(img.pixels[loc]) - 20.0;

     // smooth the rms data by smoothing factor
    sum += (rms.analyze() - sum) * smooth_factor;  

    // rms.analyze() return a value between 0 and 1. It's
    // scaled to height/2 and then multiplied by a scale factor


      // Translate to the location, set fill and stroke, and draw the rect
      pushMatrix();
      //translate(x + 300, y + 250, rms_scaled);
      translate(x + 200, y + 200, rms_scaled);
      fill(c, 204);
      noStroke();
      rectMode(CENTER);
      rect(0, 0, cellsize, cellsize);
      popMatrix();
    }
  }
}

Still very new at this so I apologize in advance. I took a few different codes from online and I want to combine them together to make my camera on my laptop control the static. I pretty much want the shadow of a human figure or object to be seen underneath (or on top of the static). Anytime I do this however, I cant figure out how to get the data to read with a static image that's moving.

import processing.video.*;
Capture video;

int videoScale=10;
void setup() {

  frameRate(10);
  size(512, 512); 
  video = new Capture(this);  
  video.start();
}
void captureEvent(Capture video) {
  video.read();
}
void draw() {
  background(0);
  video.loadPixels();  

  loadPixels();
  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
      float randomValue = random(255)*videoScale;
      pixels[x+y*width] = color(randomValue, randomValue, randomValue);

  }
  updatePixels();
  }}

I made several Python versions of 2d metaball sketches I found here on the forum or on the CodingTrain Github.

Problem: It runs super slow (<1fps !) while all Java versions run very smoothly (60fps).

Questions:

• Why such a difference in the framerates ?

• Is is possible to improve the Python code or am i for ever doomed for having chosen Python mode over Java mode ?

original JAVA code

main tab:

Blob[] blobs = new Blob[10];

void setup() {
  size(640, 360);
  colorMode(HSB);
  for (int i = 0; i < blobs.length; i++) {
    blobs[i] = new Blob(random(width), random(height));
  }
}

void draw() {
  background(51);


  println(frameRate);

  loadPixels();
  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
      int index = x + y * width;
      float sum = 0;
      for (Blob b : blobs) {
        float d = dist(x, y, b.pos.x, b.pos.y);
        sum += 10 * b.r / d;
      }
      pixels[index] = color(sum, 255, 255);
    }
  }

  updatePixels();

  for (Blob b : blobs) {
    b.update();
    //b.show();
  }
}

blob class

class Blob {
  PVector pos;
  float r;
  PVector vel;

  Blob(float x, float y) {
    pos = new PVector(x, y);
    vel = PVector.random2D();
    vel.mult(random(2, 5));
    r = random(120, 400);
  }

  void update() {
    pos.add(vel); 
    if (pos.x > width || pos.x < 0) {
      vel.x *= -1;
    }
    if (pos.y > height || pos.y < 0) {
      vel.y *= -1;
    }
  }

  void show() {
    noFill();
    stroke(0);
    strokeWeight(4);
    ellipse(pos.x, pos.y, r*2, r*2);
  }
}

PYTHON code

liste = []

def setup():
    size(640, 360, FX2D)
    colorMode(HSB)
    [liste.append(Blob(random(width), random(height))) for e in range(10)]

def draw():
    loadPixels()
    for x in range(width):
        for y in range(height):
            index = x + y * width
            sum = 0
            for e in liste:
                d = dist(x, y, e.pos.x, e.pos.y)
                try:
                    sum += 10 * e.r / d
                except ZeroDivisionError:
                    return 1
            pixels[index] = color(sum, 255, 255)
    updatePixels()

    for e in liste:
        e.update()

class Blob(object):
    def __init__(self, x, y):
        self.pos = PVector(x, y)
        self.velocity = PVector.random2D()
        self.velocity.mult(random(2, 5))
        self.r = random(120, 400)

    def update(self):
        self.pos.add(self.velocity)

        if self.pos.x > width or self.pos.x < 0:
            self.velocity.x *= -1
        if self.pos.y > height or self.pos.y < 0:
            self.velocity.y *= -1

For example: I have an image, whose original size is 10x10 pixels, scaled up by 10 so on the screen it’s 100x100. It’s placed at x=100, y=100. The mouse is located at x=150, y=150. What code would I need to get a true/false on the transparency of the image at the mouse position?

I looked at the documentation but it’s a little unclear. I also don’t know how to access alpha data.

Here’s my guess(in python mode):

test_img = loadImage(“image.png”)
image(img, 100, 100, 100, 100)

def if_mouse_on_image(img, xpos, ypos):
    mouse_on_image_x = mouseX - xpos
    mouse_on_image_y = mouseY - ypos

    pixel_data = img.get(mouse_on_image_x, mouse_on_image_y, 10, 10) #here is where I’m confused the most. 
    return not pixel_data[3] #is this correct? I’m not familiar with alpha values

print(if_mouse_on_image(test_img))

Would this code achieve my goals? The reason I haven’t tried this myself is because I’m not at my computer. I’m writing this from my phone.

 import org.openkinect.processing.*;
 import processing.video.*;
  Movie video;
  Kinect2 kinect2;
 int minDepth=0;
  int maxDepth=4500; //4.5m
  void setup() {
  size(1920,1080);
  video = new Movie(this, "final-02.mov");
  video.loop();
  kinect2 = new Kinect2(this);
  kinect2.initDepth();
  kinect2.initDevice();
  }
  void movieEvent(Movie video){
 video.read();
  }
  void draw() { 
  image(video, 0, 0);
  video.loadPixels();

int[] depth = kinect2.getRawDepth();

for (int x = 0; x < kinect2.depthWidth; x++){
  for (int y = 0; y < kinect2.depthHeight; y++){
    int offset = x + y * kinect2.depthWidth;
    int d = depth[offset];


    if (d > 10 && d < 400){
      //video.pixels[offset] = color(255, 100, 15);
      tint(10,255);
    } else {
      //video.pixels[offset] = color(150, 250, 180);
      tint(250,10);
    }
  }
  println(x);
}

  video.updatePixels();
  image(video,0,0);
  }

float x;
float y;
float[][] points;
float amplitude = 150.0;
int num_waves = 15;
int[][] grid;
float increment = 0.02;


void setup()
{
  size(640,640);
}

void draw()
{
  background(0);
  float yoff=0.0;
  loadPixels();
  for(int y=0; y<height; y++)
  {
    float xoff = 0.0;
    for (int x=0; x<width; x++)
    {
      int index = (x+y*width);
      float r = noise(xoff,yoff)*100;
      pixels[index]= color(r,0,r,140);
      xoff+=.01;
    }
    yoff+=.01;
  }
  updatePixels();
  noLoop();
  println(randomGaussian()*pixels.length);

    float b=0;
  while (b < width)
  {
    point(b, height*noise(b));
    b=b+1;
  }

translate(0,height/2);

for(int j=0; j<num_waves; j++)
{
  strokeWeight(1);
  stroke(0,120,120);
  translate(-2,4);
  sineWave();
}
}

float[][] Points()
{
  points = new float[width*3][2];
  x = 0.0;
  for(int j=0; j<points.length; j++)
  {
    y = amplitude*pow(sin(.015*x),5)*cos(.015*x);
    for(int i=0; i<2; i++)
    {
      switch(i)
      {
        case 0:
        points[j][i]=x;
        break;
        case 1:
        points[j][i]=y;
        break;
      }
    }
    x+=PI/4;
  }
  return(points);
}


void sineWave()
{
  float[][] points = Points();
  beginShape();
  vertex(0,0);
  noFill();
  for(int n=0; n<points.length; n++)
  {
    vertex(points[n][0],points[n][1]);
  }

  endShape();
}

Sorry that it's not the cleanest of code, I need to go back and clean it up later. But anyway, inside of the draw function, I've used the noise function to create a simple purple and black texture that fits the whole screen. What I would like to do is have the texture only take up a specified shape within the screen, such as in this image:

https://cnet4.cbsistatic.com/img/p2JgkXzoNDuAakOloAly3fIdYl4=/fit-in/970x0/2013/05/09/8d21444e-cc2e-11e2-9a4a-0291187b029a/sine_1.jpg

(For example in this image the noise is not really applied in any of the four corners of the image) I think I might be able to accomplish this by first drawing the shape that I want with bezier vertices, and then choose a fill color such as white, and then go through each of the pixels and testing to see if the color of the pixel is white, and then if so then apply the noise function to those pixels. I'm not sure if that would work though, and even if it does, it seems like it would be extremely tedious. Also an added bonus would be to be able to make the outer edges of the noise have a lower color saturation but that's not my primary concern.

Thanks for the help!

I need help to add interactivity to a work I've done, can you help me with this?

class Particle {

  PVector location;
  PVector velocity;
  PVector acceleration;
  PVector force,friction;
  float mass,r,distance,loc;
  float maxForce, maxSpeed,strength;
  int id,val;
  color c;
  float k = 0.02;
  int age = 0;
  int spawnAge = (int)random(80,120);
  float minr = 0;
  float maxr = 5.0;
  boolean spawned = false;

  Particle(float x, float y,int _id) {
    mass = 0.1;
    id = _id;
    r = 0.1;
    maxSpeed = 1;
    maxForce = 10;
    location = new PVector(constrain(x,r,width-r), constrain(y,r,height-r));
    velocity = new PVector(0, 0);
    acceleration = new PVector(0, 0);
  }

  void applyForce(PVector force) {
    //PVector f = PVector.div(force, mass);
    acceleration.add(force);
  }

  void update() {
    velocity.add(acceleration);
    velocity.limit(maxSpeed);
    location.add(velocity);
    acceleration.mult(0);
    friction();
    borders();
    age+=1;
  }

  void friction(){
     friction = velocity.copy();
     friction.mult(-1);
     friction.normalize();
     friction.mult(k);

     applyForce(friction);
  }

  void display() {

    ellipse(location.x,location.y,r*2,r*2);
  }

  PVector attract(Particle p) {
    force = PVector.sub(p.location,location);
    distance = force.magSq(); 

      distance = constrain(distance, 1.0, 5000.0);
      force.normalize();

      strength = (g) / (distance*4*PI);
      force.mult(strength);n
      return force;


  }

  void setRadius (PImage img){

      loc = (int)location.x + (int)location.y*img.width;
      //c= img.get((int)location.x,(int)location.y);
      //c =  img.pixels[int(loc)];
      val = img.pixels[int(loc)] & 0xFF;
      r=  lerp(r,map(val,0.0,255.0,minr,maxr),0.01);

  }

  void borders() {
      if ( location.x < r || location.x > width-r){
          velocity.x = -velocity.x;
      }
      if ( location.y < r || location.y > height-r){
          velocity.y = -velocity.y;
      }

      if (location.x> width-r) location.x = width-r;
      if (location.x< r) location.x = r;
      if (location.y> height-r) location.y = height-r;
      if (location.y< r) location.y = r;

  }

}

I wrote (what i thought would be) a simple function : get (x, y)-point's color values :

function getPix(_x, _y) { loadPixels(); let off = (_x + _y * width) * pixelDensity() * 4; let result = [ pixels[off], pixels[off + 1], pixels[off + 2], pixels[off + 3] ]; return result; }

The function seems to work fine : console.log(off) sends back the right index, according to the "_x" & "_y" values, and i get the background's RGBA values.

Now, in Draw, i have an object displaying something. (say a blue square at 0, 0)

var col = color(0, 0, 255, 255); obj.show() { fill(col); rect(0, 0, 10, 10); }

But if i am to call getPix(0, 0); again, i still get my background's color as a result : how comes ? My guess is : loadPixels() loads before my object is shown, but since i'm using this function for the first time, i surely have some misconceptions about the way it works.

The original code is slightly more complex, and i may give it if needed, but this exemple is still pretty much alike.

Thanks for any answer to come :)

I'm trying to create an effect like the image above which I have done by crudely exporting a frame then loading it and blending it - which isn't very memory/processor efficient. I'm wanting to know what the best way producing this effect would be with the pixel array. ie - how to store the pixels[] of a single frame.

thanks.

import processing.video.*;


PImage test, test2;
float FPS;
int count;
int mod;
int rand;


Capture video;

void setup() {
  size(640, 420, P2D);
  video = new Capture(this, 640, 360, 30);
  video.start();

}

void captureEvent(Capture video) {
  video.read();
}

void draw() {
  FPS = frameRate;
  count = ceil(millis()/1000);
  mod = count % 5;

  background(245, 238, 96);

  image(video, 0, 0, 640, 420);

  loadPixels();
  for (int i = 0; i < pixels.length; i++) {

    float b = brightness(pixels[i]);
    if (b > 97) {
      pixels[i] = color (255);
    } else {
      pixels[i] = color (245, 238, 96);
    }
  }

  updatePixels();
  textSize(16);
  fill(0);
  text(FPS, 50, 50);
  text(count, 50, 75);
  text(mod, 50, 100);
  text(mouseX, 50, 125);


}

                                        import processing.video.*;

                                        int numPixels;
                                        // Number of columns and rows in the system
                                        int[] previousFrame;
                                        // Variable for capture device
                                        Movie movie;
                                        Capture video;


                                        void setup() { 
                                           size(640, 480);
                                          movie = new Movie(this, "VROXI.mp4"); 
                                          movie.loop();
                                        }

                                        // Step 4. Read new frames from the movie.
                                        void movieEvent(Movie movie) {  
                                          movie.read();
                                        }

                                        // Step 5. Display movie.
                                        void draw() {
                                          image(movie, 0, 0);
                                          video = new Capture(this, width, height);

                                          // Start capturing the images from the camera
                                          video.start(); 
                                          video.read(); // Read the new frame from the camera
                                          video.loadPixels(); // Make its pixels[] array available

                                          numPixels = video.width * video.height;
                                          // Create an array to store the previously captured frame
                                          previousFrame = new int[numPixels];
                                          loadPixels();
                                        }
                                        // When using video to manipulate the screen, use video.available() and
                                        // video.read() inside the draw() method so that it's safe to draw to the screen

                                        {int movementSum = 0; // Amount of movement in the frame
                                        for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame...
                                          color currColor = video.pixels[i];
                                          color prevColor = previousFrame[i];
                                          // Extract the red, green, and blue components from current pixel
                                          int currR = (currColor >> 16) & 0xFF; // Like red(), but faster
                                          int currG = (currColor >> 8) & 0xFF;
                                          int currB = currColor & 0xFF;
                                          // Extract red, green, and blue components from previous pixel
                                          int prevR = (prevColor >> 16) & 0xFF;
                                          int prevG = (prevColor >> 8) & 0xFF;
                                          int prevB = prevColor & 0xFF;
                                          // Compute the difference of the red, green, and blue values
                                          int diffR = abs(currR - prevR);
                                          int diffG = abs(currG - prevG);
                                          int diffB = abs(currB - prevB);
                                          // Add these differences to the running tally
                                          movementSum += diffR + diffG + diffB;
                                          // Render the difference image to the screen
                                          pixels[i] = color(diffR, diffG, diffB);
                                          // The following line is much faster, but more confusing to read
                                          //pixels[i] = 0xff000000 | (diffR << 16) | (diffG << 8) | diffB;
                                          // Save the current color into the 'previous' buffer
                                          previousFrame[i] = currColor;
                                        }
                                        // To prevent flicker from frames that are all black (no movement),
                                        // only update the screen if the image has changed.
                                        if (movementSum > 0) {
                                          updatePixels();
                                          println(movementSum); // Print the total amount of movement to the console
                                        }
                                        }

Here's the code:

 import org.openkinect.processing.*;

// Kinect Library object
Kinect2 kinect2;

//float minThresh = 480;
//float maxThresh = 830;
PImage kin;
PImage bg;

void setup() {
  size(512, 424, P3D);
  kinect2 = new Kinect2(this);
  kinect2.initDepth();
  kinect2.initDevice();
  kin = createImage(kinect2.depthWidth, kinect2.depthHeight, RGB);
  bg = loadImage("1219690.jpg");
}


void draw() {
  background(0);

  //loadPixels(); 
  tint(255,254);
  image(bg,0,0);
  kin.loadPixels();

  //minThresh = map(mouseX, 0, width, 0, 4500);
  //maxThresh = map(mouseY, 0, height, 0, 4500);


  // Get the raw depth as array of integers
  int[] depth = kinect2.getRawDepth();

  //float sumX = 0;
  //float sumY = 0;
  //float totalPixels = 0;

  for (int x = 0; x < kinect2.depthWidth; x++) {
    for (int y = 0; y < kinect2.depthHeight; y++) {
      int offset = x + y * kinect2.depthWidth;
      int d = depth[offset];
//println(d);
//delay (10);
    tint(255,127);

      if (d < 500) {
        kin.pixels[offset] = color(255, 0, 0);

        //sumX += x;
        //sumY += y;
        //totalPixels++;

      } else if (d > 500 && d<1000){
        kin.pixels[offset] = color(0,255,0);
      }  else if (d >1000 && d<1500){
        kin.pixels[offset] = color(0,0,255);
      } else {
        kin.pixels[offset] = color(0);
      }
    }
  }

  kin.updatePixels();
  image(kin, 0, 0);

  //float avgX = sumX / totalPixels;
  //float avgY = sumY / totalPixels;
  //fill(150,0,255);
  //ellipse(avgX, avgY, 64, 64);

  //fill(255);
  //textSize(32);
  //text(minThresh + " " + maxThresh, 10, 64);
}

I'm a real noob so I would realy apreciate if someone would tell me what's wrong with my code. First I just want to use Ascii code to convert an existing video (not using webcam) to text. So I copy past the script- changing it a litle bit after I had some error with font- Anyway, now I dont have an error message but the sketch is just a black screen ....

Here is the code :

import processing.video.*;
Movie video;
boolean cheatScreen;
String letterOrder =
  " .`-_':,;^=+/\"|)\\<>)iv%xclrs{*}I?!][1taeo7zjLu" +
  "nT#JCwfy325Fp6mqSghVd4EgXPGZbYkOA&8U$@KHDBWNMR0Q";
char[] letters;

float[] bright;
char[] chars;

PFont font;
float fontSize = 1.5;
void setup() {
  size(1440, 1080);
  video = new Movie(this, "Torrent.mts");
  video.play();
 int count = video.width * video.height;
  font = loadFont("ProcessingSansPro-Regular-48.vlw");
    letters = new char[256];
  for (int i = 0; i < 256; i++) {
    int index = int(map(i, 0, 256, 0, letterOrder.length()));
    letters[i] = letterOrder.charAt(index);
  }
    chars = new char[count];
      bright = new float[count];
  for (int i = 0; i < count; i++) {
     bright[i] = 128;
  }
}
void MovieEvent(Movie m) {
  m.read();
}

void draw() {
  background(0);

  pushMatrix();

  float hgap = width / float(video.width);
  float vgap = height / float(video.height);

  scale(max(hgap, vgap) * fontSize);
  textFont(font, fontSize);

  int index = 0;
  video.loadPixels();
  for (int y = 1; y < video.height; y++) {
     translate(0,  1.0 / fontSize);
      pushMatrix();
    for (int x = 0; x < video.width; x++) {
      int pixelColor = video.pixels[index];
      int r = (pixelColor >> 16) & 0xff;
      int g = (pixelColor >> 8) & 0xff;
      int b = pixelColor & 0xff;
 int pixelBright = max(r, g, b);
 float diff = pixelBright - bright[index];
      bright[index] += diff * 0.1;

      fill(pixelColor);
      int num = int(bright[index]);
      text(letters[num], 0, 0);
      index++;
 translate(1.0 / fontSize, 0);
    }
    popMatrix();
  }
  popMatrix();

  if (cheatScreen) {
    set(0, height - video.height, video);
  }
}
void keyPressed() {
  switch (key) {
    case 'g': saveFrame(); break;
    case 'c': cheatScreen = !cheatScreen; break;
    case 'f': fontSize *= 1.1; break;
    case 'F': fontSize *= 0.9; break;
}
}

Also, once I resolved this problem I would like to know how to use only a restreign number of letters (in a way that all the parts off the image that uses others letters will deseaper)

And sorry for my broken english, I'm french ;)

Thank you all for the help

loadPixels();
      for (int y = 0; y <pic.height; y++) {
        for (int x = 0; x <pic.width; x ++) {
          int index = x + height*y;
          float r = red(pic.pixels[index]);
          float g = green(pic.pixels[index]);
          float b = blue(pic.pixels[index]);
          pixels[index] = color(r, g, b);
        }
      }
      updatePixels();

saveFrame() saves the entire screen, including my user interface. And that's not what I want. I only want the image portion to be saved.

I think PImage.save is the way to go. But I don't know how to save changes to an image object and then it can save.

How do you save store changes so you can go back if you make a mistake?

My code can be found on my Github https://github.com/Finaros/Pixcell Thank you very much!

I watched a lot of Daniel Shiffman tutorials and wanted to write a piece of code that draws out the path in which a certain color moves across the screen in my video. Lets say if my video were a skateboard, and I did a trick with color wheels on, I'd like to have the program draw the movement by following the colored wheels throughout it's movement.

What I have so far:

// Most of this code I learned how to write thanks to Daniel Shiffman

import processing.video.*;

Movie video;

color trackColor; 
float threshold = 20;
float distThreshold = 75;

ArrayList<Blob> blobs = new ArrayList<Blob>();

void setup() {
  size(1080, 720);
  video = new Movie(this, "sk8.mov");
  video.loop();
  trackColor = color(206, 74, 129);
}

void movieEvent(Movie video) {
  video.read();
}

void keyPressed() {
  if (key == 'a') {
    distThreshold++;
  } else if (key == 'z') {
    distThreshold--;
  }
  println(distThreshold);
}

void draw() {
  video.loadPixels();
  image(video, 0, 0);

  blobs.clear();

  threshold = 62;

  for (int x = 0; x < video.width; x++ ) {
    for (int y = 0; y < video.height; y++ ) {
      int loc = x + y * video.width;
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);

      float d = distSq(r1, g1, b1, r2, g2, b2); 

      if (d < threshold*threshold) {

        boolean found = false;
        for (Blob b : blobs) {
          if (b.isNear(x, y)) {
            b.add(x, y);
            found = true;
            break;
          }
        }

        if (!found) {
          Blob b = new Blob(x, y);
          blobs.add(b);
        }
      }
    }
  }

  for (Blob b : blobs) {
    if (b.size() > 500) {
      b.show();
    }
  }
}


float distSq(float x1, float y1, float x2, float y2) {
  float d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1);
  return d;
}

void mousePressed() {
  // Save color where the mouse is clicked in trackColor variable
  int loc = mouseX + mouseY*video.width;
  trackColor = video.pixels[loc];
}
class Blob {
  float minx;
  float miny;
  float maxx;
  float maxy;

  Blob(float x, float y) {
    minx = x;
    miny = y;
    maxx = x;
    maxy = y;
  }

  void show() {
    stroke(0);
    fill(255);
    strokeWeight(2);
    rectMode(CORNERS);
    rect(minx, miny, maxx, maxy);
  }

  void add(float x, float y) {
    minx = min(minx, x);
    miny = min(miny, y);
    maxx = max(maxx, x);
    maxy = max(maxy, y);
  }

  float size() {
    return (maxx-minx)*(maxy-miny); 
  }

  boolean isNear(float x, float y) {
    float cx = (minx + maxx) / 2;
    float cy = (miny + maxy) / 2;

    float d = distSq(cx, cy, x, y);
    if (d < distThreshold*distThreshold) {
      return true;
    } else {
      return false;
    }
  }
}

What this code successfully does is track the color of the wheels on my skateboard, and follows the wheels throughout the clip. However, I am trying to figure out how to make it not just follow the wheels, but draw a line in the path where the wheels were before.

Any help would be greatly appreciated.

Thank you

I have an issue with PGraphic. I try to test the color of an off screen PGraphic but it bounces back this error: 'ArrayIndexOutOfBoundsException: 1001'. I would really apreciate if someone can bring his fresh look and help me to solve this! Thank a lot in advance. Best, @lolonulu

int X_Step=1;
int Y_Step=10;
int X, Y;
float radiousForce =50;
float maxForce =5;

PVector [][] points;

PGraphics pg;
PFont f;
color textColor = color(245);

void setup() {
  size(1000, 1000, P2D);
  background(0);

  f= createFont ("ARIAL", 150);
  fill(textColor);
  textFont(f);
  beginShape();
  pg = createGraphics(width, height);
  pg.smooth();
  pg.beginDraw();
  pg.fill(textColor);
  pg.textFont(f);
  pg.text("LIOR", 150, height/2+50);
  pg.endDraw();


  stroke(255);
  noFill();
  X =  (width/X_Step) +1;
  Y = (height/ Y_Step) +1;
  points = new PVector[X][Y];
  for (int x = 0; x<X; x+=1) {
    for (int y=0; y<Y; y+=1) {

      points [x][y] = new PVector(x*X_Step, y*Y_Step);
    }
  }
}
void draw() {
  background(0);



  if (pg.pixels[(int)points[X][Y].y*width +(int)points[X][Y].x] == textColor) {
    for ( int y=0; y < Y; y+=1) {
      stroke(255);
      strokeWeight(1);

      beginShape();
      curveVertex(points[0][y].x, points[0][y].y);

      for (int x=0; x < X; x+=1) {
        curveVertex(points[x][y].x, points[x][y].y);
      }
      curveVertex(points [X-1][y].x, points [X-1][y].y);
      endShape();
    }
  }
  if (mousePressed) {
    PVector mouse = new PVector(mouseX, mouseY);
    for (int x=0; x<X; x+=1) {
      for (int y=0; y<Y; y+=1) {
        float d =PVector. dist(points[x][y], mouse);
        if (d < radiousForce) {
          PVector force= PVector.sub(points[x][y], mouse);
          force.normalize();
          force.mult(map(d, 0, radiousForce, maxForce, 0));
          points[x][y].add(force);
        }
      }
    }
  }
}

import processing.video.*;

Capture video;

// A variable for the color we are searching for.
color trackColor; 

void setup() {
  size(640, 480);
  video = new Capture(this, width, height);
  video.start();
  // Start off tracking black
  trackColor = color(0);
}

void captureEvent(Capture video) {
  // Read image from the camera
  video.read();
}

void draw() {
  video.loadPixels();
  image(video, 0, 0);

//more higher more arger chance to find the colour 
  float worldRecord = 500; 

// seek for the closest color
  int closestX = 0;
  int closestY = 0;

// search every pixel
  for (int x = 0; x < video.width; x ++ ) {
    for (int y = 0; y < video.height; y ++ ) {
      int loc = x + y*video.width;
// define and showWhat is current color
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);

// Using euclidean distance to compare colors
      float d = dist(r1, g1, b1, r2, g2, b2); // We are using the dist( ) function to compare the current color with the color we are tracking.

      // If current color is more similar to tracked color than
      // closest color, save current location and current difference
      if (d < worldRecord) {
        worldRecord = d;
        closestX = x;
        closestY = y;
      }
    }
  }

  // trackcolour not more far than 20 
    if (worldRecord < 20) { 
    // Draw a circle at the tracked pixel
    fill(trackColor);
    strokeWeight(4.0);
    noStroke();
    ellipse(closestX, closestY, 60, 60);
  }
}

void mousePressed() {
  // store the colour from video and keep it tracked
  int loc = mouseX + mouseY*video.width;
  trackColor = video.pixels[loc];
}

I'm calculating the mandelbrot set and would like to download i high resolution image. This is done by calculating a large image (the global img variable), assigning it to the downloadImage variable for storage and issuing a download. All this is working as intended, however the download doesn't always work. Especially when I try to render a large image with 5000 pixels in width the download sometimes does not start. Chrome recognizes that a download has been issued and shows the green wave like animation on the menu bar but the download window never appears. Since the download sometimes works fine and sometimes not, I have not been able to locate the problem so far.

Any imput is appreciated as I am stuck.

EDIT: The download happens in the function downloadImage()

var ratio;
var mapSize;
var centerX;
var centerY;
var renderSpeed = 20;
var currentLine = 0;
var img;
var downloadImage;
var calcTime;
var downloadButton;

function setup() {

  mapSize = 2;
  centerX = -1;
  centerY = 0;

  setupCanvas();

  downloadButton = createButton('Download');
  downloadButton.position(5, 85);
  downloadButton.mousePressed(downloadImage);

  noLoop();
}

function setupCanvas()
{
  resizeCanvas(window.innerWidth, window.innerHeight);
  ratio = window.innerWidth / window.innerHeight;
  pixelDensity(1); // Enables fine rendering for HDPI screens
  loadPixels(); // Enables pixels[]
  updateMandelbrotSet(window.innerWidth, window.innerHeight, true);
  updateText();
}

function windowResized() {
  setupCanvas();
}

function downloadImage()
{
  updateMandelbrotSet(window.innerWidth, window.innerHeight, true);
  updateMandelbrotSet(5000, 5000 / ratio, false);
  downloadImage = img;
  //downloadImage.save('Mandelbrot','png');  
  updateText();

  var mimeType = 'image/png';
  var downloadMime = 'image/octet-stream';
  var imageData = downloadImage.canvas.toDataURL(mimeType);
  var extension = 'png';
  var filename = 'Mandelbrot';
  imageData = imageData.replace(mimeType, downloadMime);

  //Make the browser download the file
  p5.prototype.downloadFile(imageData, filename, extension);

}

function updateText() {fill(255, 255, 255, 255);
  text('Calculation time: ' + calcTime + ' ms', 5, 15);
  text('CenterX: ' + centerX, 5, 35);
  text('CenterY: ' + centerY, 5, 55);
  text('Size: ' + mapSize, 5, 75);
}

function updateMandelbrotSet(xWidth, yWidth, update) {
  var start = millis();
  img = createImage(xWidth, yWidth);
  img.loadPixels();
  for (var x = 0; x < xWidth; x++) {
    for (var y = 0; y < yWidth; y++) {

      var reOrg = map(x, 0, xWidth, centerX - mapSize * ratio, centerX + mapSize * ratio)
      var imOrg = map(y, 0, yWidth, centerY - mapSize, centerY + mapSize)
      var re = reOrg;
      var im = imOrg

      var nMax = 99; // Iteration count (precision)
      var n = 0;
      var z = 0;

      while (n < nMax) {
        var reNew = re * re - im * im;
        var imNew = 2 * re * im;
        re = reNew + reOrg;
        im = imNew + imOrg;

        if (re * re + im * im > 4)
        {
          break;
        }

        n++;
      }

      var pix = (x + y * xWidth) * 4;
      if (n == nMax) {
        img.pixels[pix + 0] = 0;
        img.pixels[pix + 1] = 0;
        img.pixels[pix + 2] = 0;
        img.pixels[pix + 3] = 255;
      } else {
        img.pixels[pix + 0] = ((n - 33)/33) * 255;
        img.pixels[pix + 1] = ((n - 66)/33) * 255;
        img.pixels[pix + 2] = ((n - 0)/33) * 255;
        img.pixels[pix + 3] = 255;
      }
    }
  }
  img.updatePixels();

  if (update)
  {
    image(img, 0, 0);
  }

  var end = millis();
  calcTime = end - start;
  console.log("This took: " + calcTime + "ms.")
}

function mouseWheel(event) {
  if (event.delta < 0) {
    if (mapSize > 5e-16) {
      x = map(mouseX, 0, window.innerWidth, centerX - mapSize * ratio, centerX + mapSize * ratio)
      centerX = centerX + (x - centerX) * 0.3;
      y = map(mouseY, 0, window.innerHeight, centerY - mapSize, centerY + mapSize)
      centerY = centerY + (y - centerY) * 0.3;
      mapSize = mapSize * 0.7; 
    }
  } else {
    x = map(mouseX, 0, window.innerWidth, centerX - mapSize * ratio, centerX + mapSize * ratio)
    centerX = centerX - (x - centerX) * 0.3;
    y = map(mouseY, 0, window.innerHeight, centerY - mapSize, centerY + mapSize)
    centerY = centerY - (y - centerY) * 0.3;
    mapSize = mapSize / 0.7; 
  }

  updateMandelbrotSet(window.innerWidth, window.innerHeight, true);
  updateText();
}

Which is taking down-sampled web-cam footage. Sending the large pixel-block-color-information (black and white) array data over UDP (over the network) and have Cinema-4d listen to the UDP data packets with a python effector.

My immediate issue is getting the array pixel data for the large pixels (not every single individual pixel, which I think I'm getting now). I'm not sure what is being output when I use this code in the console though. Is this code sending every pixels color data in the window to the console? How do I get just the big down sampled pixel blocks? Or is it already only sending the rows/columns that have been down-sampled? I'm a little confused. This stuff is kind of over my head, but I'm trying to figure it out. Any help would be appreciated.

Here's more info on what I'm trying to do and what my immediate issue is: I'm trying to print the large pixel values every frame (eventually I'd like to only have black and white values but I haven't gotten that far). I'm not too sure how exactly Processing 3.3.6 is interpreting this code. Or if this is the wrong way to go about getting the pixel array data clean enough to send to another program and interpret. I'm just hacking code together right now like a maniac. I finally got pixel output in the console (I think), though I don't know what the output actually means. It looks like Java (hex info?), but I don't really know exactly.

I'm getting print data like this: [I@8e9278b[I@8e9278b[I@8e9278b[I@8e9278b[I@8e9278b[I@8e9278...

import processing.video.*;

// Size of each cell in the grid, ratio of window size to video size
//Screen Pixels are 80 width and 60 height in the case of 640/480
int videoScale = 8;
// Number of columns and rows in the system
int cols, rows;
// Variable to hold onto Capture object
Capture video;

void setup() {  
  size(640, 480);  
  // Initialize columns and rows  
  cols = width/videoScale;  
  rows = height/videoScale;  
  background(0);
  video = new Capture(this, cols, rows);
  video.start();
}

// Read image from the camera
void captureEvent(Capture video) {  
  video.read();
}

void draw() {
  video.loadPixels();  
  // Begin loop for columns  
  for (int i = 0; i < cols; i++) {    
    // Begin loop for rows    
    for (int j = 0; j < rows; j++) {      
      // Where are you, pixel-wise?      
      int x = i*videoScale;      
      int y = j*videoScale;
      color c = video.pixels[i + j*video.width];
      fill(c);   
      stroke(0);      
      rect(x, y, videoScale, videoScale);

      //Experiment code for capturing video pixel color data so far:
      loadPixels();
      //I'm not sure I need this get() - taking it out still sends data to console.
      get();
      print(pixels);
    }  
  }
}

I've talked to Adam about how he did it, and he's using openFrameworks. He said he takes video from his webcam - down-samples it to those big pixels - then sends the greyscale (0-255) array information through UDP to Cinema 4d, and then has a videoIn python script (as an effector) which takes that information and displays the shading on a matrix of cubes (1 for each pixel in his down-sampled array).

I'm using Processing 3.0 and he said it would work just the same if I got everything working right. Well I found code that I've gotten to where the output is very similar to his video-downsampled.

import processing.video.*;

// Size of each cell in the grid, ratio of window size to video size
//Screen Pixels are 80 width and 60 height in this case 640/480
//Note: 128 large-pixel width at 1024 and 72 big-pixels at 576 height
int videoScale = 8;
// Number of columns and rows in the system
int cols, rows;
// Variable to hold onto Capture object
Capture video;

void setup() {  
  size(640, 480);  
  // Initialize columns and rows  
  cols = width/videoScale;  
  rows = height/videoScale;  
  background(0);
  video = new Capture(this, cols, rows);
  video.start();
}

// Read image from the camera
void captureEvent(Capture video) {  
  video.read();
}

void draw() {
  video.loadPixels();  
  // Begin loop for columns  
  for (int i = 0; i < cols; i++) {    
    // Begin loop for rows    
    for (int j = 0; j < rows; j++) {      
      // Where are you, pixel-wise?      
      int x = i*videoScale;      
      int y = j*videoScale;
      color c = video.pixels[i + j*video.width];
      fill(c);   
      stroke(0);      
      rect(x, y, videoScale, videoScale);    
    }  
  }
}

The above code gets me basically in the ballpark as far as a video downsampled to a manageable array size for UDP transfer. I've been able to get a simple UDP message sent from Processing 3.0 to cinema 4d in a python tag, which as I advance each frame I get the message (which is looping in processing) each frame I move forward. So in theory I'm getting there.

import hypermedia.net.*;

int port = 20000;
String ip ="127.0.0.1";
String message =new String("Hello");
UDP udpTX;

void setup(){
udpTX=new UDP(this);
udpTX.log(true);
noLoop();
}

void draw(){
udpTX.send(message,ip,port);
delay(499);
loop();
}

With this UDP transfer the string "Hello" gets sent in a loop with a little less than a half second delay. To the question! How do I meld the two? Have the camera start showing the down-sampled video and then be sending the black and white "big" pixel color data through the UDP connection? I'm new to this, and so filling in the gaps is a big challenge but I'm trying! If I can't get help though I probably will have to chalk this one up to being over my head. Hopefully someone here is a genius who can help me. :D

import processing.video.*;   //importing the video library
Movie movie;   //declaring movie

void setup() {
  size(1280, 720);
  movie = new Movie(this, "greenscreen_hand.mp4");   //loading movie and..
  movie.loop();   //..looping the movie
}

void draw() {
  loadPixels();
  movie.loadPixels();
  for (int j = 0; j < height; j++) {

    for (int i = 0; i < width; i++) {

      int stelle = i+(j*width);   //iterating through the screen and setting the number of the index through the whole frame
      float red = red(movie.pixels[stelle]);   //RGB values of the pixel
      float green = green(movie.pixels[stelle]);
      float blue = blue(movie.pixels[stelle]);

      color c = color(0, 0, 0);   //black pixels

      if (red>40 && red<80 && green>190 && blue>60 && blue<90) {   //if pixel is kind of green

        movie.set(i, j, c);   //new pixel color
      }
    }
  }

  image(movie, 0, 0);
}

void movieEvent(Movie m) {
  m.read();
}

void mousePressed() {   //that actually doesn't matter, it's just for some information from some steps before
  int stelle = mouseX+(mouseY*width);

  float red = red(movie.pixels[stelle]);
  float green = green(movie.pixels[stelle]);
  float blue = blue(movie.pixels[stelle]);

  println("R: " + red +" "+ "G: " + green +" "+ "B: " + blue);
}

Now I got a whole bunch of problems. Well, sometimes there is an ArrayIndexOutOfBoundsException: 0 (I don't know why actually :/) and sometimes it works and the video is starting, but the background is flickering (half-green and half-black) (maybe because pixels are loading too slow in every millisecond frame?)

Can someone help me? Or some suggestions about what I could change?

Is there a way to make openGL render the sketch, or any other simple "trick" to improve performance?

Here's my code so far:

global pixel_log
pixel_log = []

def get_pixels():
    for pixel_width in range(width):
        for pixel_height in range(height):

            current_pixel = get(pixel_width,pixel_height)
            pixel_log.append(current_pixel)

def setup():
    size(600,540)

    rainbow = loadImage("rainbow.jpg")
    image(rainbow,0,0)
    get_pixels()

    global pixel_index
    pixel_index = list(range(0,width*height+1))

def draw():
    color_choice = choice(pixel_log)
    fill(color_choice)
    rect(100,100,400,400)
    sleep(1)

This is a modification of Daniel Shiffman's Video - Software Mirrors code. https://processing.org/tutorials/video/

Thanks!

import processing.video.*;

// Size of each cell in the grid, ratio of window size to video size
int videoScale = 20;

// Number of columns and rows in the system
int cols, rows;

// Variable to hold onto Capture object
Capture video;

// used for the noise randomness
float xoff = 0.0;
float yoff = 0.0;
float coff = 0.0;


void setup() {  
  size(1280, 720); 
  //fullScreen( );

  // Initialize columns and rows  
  cols = width/videoScale;  
  rows = height/videoScale;  
  background(0);
  video = new Capture(this, cols, rows);
  video.start();
}

// Read image from the camera
void captureEvent(Capture video) {  
  video.read();
}

void draw() {
  video.loadPixels(); 

  // Begin loop for columns  
  for (int i = 0; i < cols; i++) {    
    // Begin loop for rows    
    for (int j = 0; j < rows; j++) {            
      int x = i*videoScale;      
      int y = j*videoScale;
      color c = video.pixels[i + j*video.width];

      fill(c);   
      stroke(0); 

      //rotate the rect
      xoff = xoff + .01;
      float n = noise(xoff) * width;
      pushMatrix( );
      translate(x + videoScale/2, y + videoScale/2);
      rotate(radians(45 + n));
      translate(-(x + videoScale/2), -(y + videoScale/2));

      // draw the rect with the video color
      rect(x, y, videoScale/1.9, videoScale/1.9); 
      popMatrix( );
    }
  }
}